<template>
	<view class="box1">
		<!--输入弹框 -->
		<uni-popup :show="inputmodel" position="bottom" mode="fixed" @hidePopup="inputmodel1()">
			<view class="modetitle f17 text-c por">
				<image src="../../static/close.png" class="closeicon" @click="inputmodel = false"></image>
				<view class="f22 fwb">
					<view class="tetx--left">{{paymachinename}}</view>
				</view>
				<view class="fsc f16 mt20 f600">
					<view class="">{{i18n.shul}}</view>
					<inputnumber v-model="paynumber" :min="1"></inputnumber>
				</view>
				<view class="fsc f16 mt16 f600">
					<view class="">{{i18n.jine}}</view>
					<view class="color-yellow f20 fwb">{{totalPrice1}} USDT</view>
				</view>
				<view class="fac paybutton f16" @click="gopay">{{i18n.ljzf}}</view>
			</view>
		</uni-popup>
		<view class="">
			<Title :txt="i18n.sblb" :showback="true"></Title>
		</view>
		<view class="px15 pt15">
			<password :show="payShow" @close='payCloseFunc' @finish="submit" ref="payword"></password>
			<view class="bgcc bor5 mb10 white py15 px10" v-for="(item,index) in list" :key="item.id"  @click="gotoEquipDetail(item.id)">
				<view class="f14 f600">{{item.name}}</view>
				<view class="">
					<view class="content fcs mt12">
						<image :src="item.image" class="minericon" mode=""></image>
						<view class="ml10 flex-1">
							<view class="fcs ">
								<view class="f15 color-theme f600">{{item.storageCapacity}} T</view>
								<view class="f12 color-gray ml5">{{i18n.ccrl}}</view>
							</view>
							<view class="fsb mt8">
								<view class="f12  color-gray">
									<view class="">{{i18n.kc}}:{{(item.sumNumber)-(item.hasBuy)}}</view>
									<view class="mt2">{{i18n.fwf}}:{{item.serviceCharge*100}}%</view>
								</view>
								<view class="fcs color-yellow">
									<view class="f15 mgr4 f600">{{item.price}}</view>
									<view class="f12 f600 ">USDT/{{i18n.tai}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="pro mt15">
						<view class=" fcc">
							<view class="por bgcc progressbox">
								<view class="poa hasbuy" :style="{width:((item.hasBuy)/(item.sumNumber)*100)+'%'}">
								</view>
							</view>
							<text
								class="f11 ml8 color-gray">{{i18n.ys}}{{((item.hasBuy)/(item.sumNumber)*100).toFixed(2)}}%</text>
						</view>
						<view class="gobuy white bg-theme f14 poa py6 px23 bor5" @click.stop="openinputmodel(item,item.id)">{{i18n.qgm}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import inputnumber from '../../components/inputnumber.vue';
	import password from '../../components/payPassword/pay_Password.vue';
	import aa from "../../components/popup/uni-popup/uni-popup.vue"
	export default {
		name: 'equiplist',
		components: {
			password,
			inputnumber,
			// unipoup: aa,
			uniPopup: aa
		},
		computed: {
			totalPrice1() {
				var number = this.payUsdt * this.paynumber
				number = String(number).replace(/^(.*\..{4}).*$/, "$1");
				number = Number(number); // number = 12.3321
				return number
			},
			i18n() {
				return this.$t('home');
			}
		},
		data() {
			return {
				list: [
				],
				paynumber: 1,
				payShow: false,
				payVisible: false,
				totalPrice: 0,
				paymachinename: "",
				payUsdt: 0,
				payid: 0,
				inputmodel: false,
				paymodel: false,
				noticeContent: "",
				type: "",
				checkmodel: false,
				payword: ""

			};
		},
		onLoad(options) {
			// console.log(options)
			this.type = options.id
		},
		onShow() {
			this.getMinerList()
		},
		methods: {
			async getMinerList(){
				let { data } = await this.$http.post('index.getMineListByType', {type: this.type}, { isAuth: true, tipConfig: { isLoading: false } });
				this.list = data
			},
			cancel() {
				this.Mark = false
			},
			inputmodel1() {
				this.inputmodel = false
				this.paynumber = 1
			},
			paymodel1() {
				this.paymodel = false
			},
			openinputmodel(ite,id) {
				this.payid = id
				this.paymachinename = ite.name
				this.payUsdt = ite.price
				this.inputmodel = true
			},
			payCloseFunc(bool) {
				this.payShow = false
			},
			gopay() {
				this.inputmodel =false
				this.payShow = true
			},
			submit(e) {
				let params = {
					count: this.paynumber,
					password: e,
					mineId: this.payid,
					phoneId:this.UID
				}
				this.$http.post("index.buyMine", params).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.navigateTo({
							url: "./buysuccess?price=" + this.totalPrice1
						})
					}
			
				}).catch(e => {
					this.checkmodel = false
					this.$refs.payword.close();
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				})
			},
			gotoEquipDetail(id) {
				uni.navigateTo({
					url: "./equipdetail?id=" + id
				})
			},
		}
	};
</script>

<style lang="less">
	/deep/ .uni-input-placeholder {
		text-align: right !important;
	}
	.closeicon{
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top:30rpx;
		right: 30rpx;
	}
	.progressbox {
		width: 230rpx;
		height: 8rpx;
		background-color: #586471;
	}
	.hasbuy{
		background-color: #FF9439;
		height: 8rpx;
		left: 0;
		top:0
	}
	.minericon {
		width: 120rpx;
		height: 130rpx;
	}

	.pay {
		width: 628rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		opacity: 1;
		background: #1372df;
		text-align: center;
		border-radius: 8rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.itembox {
		width: 690rpx;
		padding: 0 0rpx 36rpx 0rpx;
		border-bottom: 2rpx solid #ccc;
		margin-left: auto;
		margin-right: auto;

		.buttonable {
			width: 180rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			opacity: 1;
			background: #1372df;
			border-radius: 6rpx;
			color: #fff;
		}

		.buttondisable {
			width: 180rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			opacity: 1;
			background: #efefef;
			border-radius: 6rpx;
			color: #6d7278;
		}
	}

	.popupcontent {
		font-size: 28rpx;
		line-height: 44rpx;
		overflow-y: scroll;
		height: 600rpx;
		text-align: left;
		padding: 0rpx 36rpx 36rpx 36rpx;
		width: 600rpx;
		display: block;
		position: relative;
	}

	.maskbox {
		width: 100vw;
		padding-top: 20px;
		// height:440px;
		padding-bottom: 10px;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		text-align: initial;
		line-height: initial;
		position: relative;
		top: -370rpx;

		.add {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.mineritem {
			position: relative;

			image {
				position: absolute;
				top: 28rpx;
				right: 38rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}

		.center {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 800;
			color: #333333;
			text-align: center;
			margin-bottom: 60rpx;
		}

		.sclose {
			width: 40rpx;
			height: 40rpx;
			right: 30rpx;
			position: absolute;
		}

		.minercont {
			.minerActive {
				background: linear-gradient(134deg, #4194EE 0%, #3E76DA 100%);
				color: #fff;
			}
		}

		.minerbtm {
			padding: 28rpx 0;

			.pledgecont {
				width: 690rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 8rpx;
				background-color: #22B573;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	.box1 {
		padding-bottom: 80rpx;

		.hotbox {
			width: 642rpx;
			opacity: 1;
			background: #ffffff;
			border-radius: 24rpx;
			margin-left: auto;
			margin-right: auto;
			padding: 36rpx 36rpx 20rpx 36rpx;

			.content {
				image {
					width: 144rpx;
					height: 144rpx;
				}
			}
		}
	}

	.pro {
		position: relative;

		.sale {
			position: absolute;
			top: 0;
			left: 69%;
		}

		.gobuy {
			right: 0;
			bottom: 8rpx;
		}
	}

	/deep/ p {
		font-size: 24rpx;
		// margin-left: 80rpx !important;
	}

	.modetitle {
		background-color: #fff;
		padding:68rpx 30rpx 40rpx;
		line-height: initial;
	}
	.fenge {
		width: 2rpx;
		height: 70rpx;
		opacity: 1;
		background: #ccc;
	}

	.paybutton {
		width: 100%;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #ffffff;
		background-color:#2474F3;
		margin-top:70rpx;
		border-radius: 10rpx;
	}

	.minercont {
		.minerActive {
			background: linear-gradient(134deg, #4194ee 0%, #3e76da 100%);
			color: #fff;
		}
	}

	.mineritem {
		position: relative;

		image {
			position: absolute;
			top: 28rpx;
			right: 38rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.mineritem {
		position: relative;

		image {
			position: absolute;
			top: 28rpx;
			right: 38rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.myPoup {
		position: relative;

		.cancelpay {
			position: fixed;
			top: 20%;
			right: 10%;
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>
